import { Input, Popover, Toast } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom'
import NavBar from '../../../components/Navbar'
import './index.less'
import AmeModal from '../../income/modal'
import { useState } from 'react'
import { turnMiZuan } from '../../../api/union'
import { GetChooseMethod, GetUserInfo } from '../../../api/mine'
import appSdk from '../../../utils/app_sdk'
import { useEffect } from 'react'

export default function UnionIncome() {
  const navigate = useNavigate()
  const params = useSearchParams()[0]
  const [turnVisible, setTurnVisible] = useState(false)
  const [turnValue, setTurnValue] = useState(1)
  const [userinfo, setUserinfo] = useState({ union_mibi: 0, mibi: 0 })

  const [visible, setVisible] = useState(false)
  const otherDom = () => (
    <Popover
      content={
        <div className="con_ami">
          <p onClick={() => navigate('/union_income_detail?id=' + params.get('id'))}>公会收益明细</p>
          <p
            onClick={() => {
              appSdk('jumpToUnionIncomeDetail', JSON.stringify({ unionId: +params.get('id') }))
              setVisible(false)
            }}
          >
            公会流水明细
          </p>
        </div>
      }
      placement="bottom-start"
      mode="dark"
      trigger="click"
      className="ami"
      visible={visible}
      onVisibleChange={setVisible}
      // style={{ background: "red"  }}
      // visible
    >
      <div className="more"></div>
    </Popover>
  )

  // 获取公会信息
  const getUnionInfo = () => {
    GetUserInfo().then((res) => {
      console.log(res)
      setUserinfo(res.data)
    })
  }

  useEffect(() => {
    getUnionInfo()
  }, [])

  const turnMoneyFun = () => {
    Toast.show({
      content: '加载中',
      icon: 'loading',
      maskClickable: false
    })
    turnMiZuan({ mibi: turnValue })
      .then((res) => {
        console.log(res)
        getUnionInfo()
        setTurnVisible(false)
        Toast.show({
          content: '请求成功',
          icon: 'success'
        })
      })
      .catch((err) => {
        Toast.show({
          content: err.message,
          position: 'bottom'
        })
      })
  }

  return (
    <div>
      <NavBar title="公会收益" other={otherDom()} />
      <div className="content" style={{ padding: 16 }}>
        {/* <div className="dou_down box">
					<div className="tit"><div className="icon" /> <span>{window.baseConfig.coin_name}余额：</span> </div>
					<div className="num">{userinfo?.mibi || 0}</div>
					<div className="tips">收到的{window.baseConfig.coin_name}值</div>
				</div> */}
        <div className="money box">
          <div className="tit">
            <span>可提现金额：</span>
          </div>
          <div className="num">{userinfo?.union_mibi || 0}</div>
        </div>
        <div className="btn_group">
          <div className="btn turn" onClick={() => setTurnVisible(true)}>
            转换
          </div>
          <div className="btn out" onClick={() => navigate('/union_withdraw')}>
            提现
          </div>
        </div>
      </div>

      <AmeModal
        visible={turnVisible}
        className="modal2 turn_modal"
        title="确定转换信息"
        confirmText="确认"
        onCancel={() => setTurnVisible(false)}
        onConfirm={turnMoneyFun}
      >
        <div className="sub_tit">点击输入转换金额</div>
        <div className="turn_input">
          <Input
            // type="number" // 正则 不能加number
            onChange={(e) => {
              setTurnValue(e.replace(/[^\d]/g, ''))
            }}
            // onBlur={(e) => setTurnValue(Math.floor(+e.target.value) * 1)}
            min={1}
            value={turnValue ? turnValue : ''}
          />
          <div className="icon"></div>
        </div>
      </AmeModal>
    </div>
  )
}
